import React from 'react';
import { Col, Form, Input } from 'antd';
import PropTypes from 'prop-types';

const Field = props => {
  const { name, label, rules, children, placeholder } = props;
  return (
    <Col span={8} key={`${name}`}>
      <Form.Item name={name} label={label} rules={rules}>
        {children || <Input placeholder={placeholder} />}
      </Form.Item>
    </Col>
  );
};

Field.propTypes = {
  name: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  rules: PropTypes.array,
  children: PropTypes.node,
  placeholder: PropTypes.string,
};

Field.defaultProps = {
  rules: null,
  children: null,
  placeholder: '请输入',
};

export default React.memo(Field);
